<template>
  <div class="panel-container">
    <div class="panel-content">
      <div class="panel-line space-between">
        <div class="panel-title">{{ title }}</div>
        <div class="icon-box">
          <svg-icon @click="handleTypeChange('pie')" :icon-class="type === 'pie' ? 'pieChartActive' : 'pieChart'" class="icon" :class="{ active: type === 'pie' }"></svg-icon>
          <svg-icon @click="handleTypeChange('bar')" :icon-class="type === 'bar' ? 'barChartActive' : 'barChart'" class="icon" :class="{ active: type === 'bar' }"></svg-icon>
          <svg-icon @click="handleTypeChange('line')" :icon-class="type === 'line' ? 'lineChartActive' : 'lineChart'" class="icon" :class="{ active: type === 'line' }"></svg-icon>
        </div>
      </div>
      <div class="panel-line flex-end">
        <el-radio-group v-model="tabActive" @change="handleChange" style="margin-right: 30px" size="mini">
          <el-radio-button v-for="item in tabList" :key="item.id" :label="item.id">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="chart-box" v-if="data && data.key && data.key.length > 0">
        <el-row :gutter="10" v-if="type !== 'pie'">
          <el-col :span="24">
            <MixChart v-if="type === 'bar'" :chartData="chartDataBar" :xAxis="xAxis" :height="height" />
            <LineChart v-if="type === 'line'" :chartData="chartDataLine" :height="height" @click="handleClick" />
          </el-col>
        </el-row>
        <el-row :gutter="10" v-else>
          <el-col :span="16">
            <PieChart :chartData="chartDataPie" :height="height" @click="handleClick" />
          </el-col>
          <el-col :span="8">
            <slot name="data" :data="data"></slot>
            <div class="list" v-if="data">
              <div class="item" :class="{ w100: data.key.length < 16 }" v-for="(item, index) in data.key" :key="item + index">
                <div class="title">{{ item }}</div>
                <div class="num">{{ data.total[index] }}</div>
              </div>
              <div class="item total" v-if="data.total_num" :class="{ w100: data.key.length < 16 }">
                <div class="title">合计</div>
                <div class="num">{{ data.total_num }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-empty v-else style="height: 400px"></el-empty>
    </div>
  </div>
</template>

<script>
import MixChart from '@/components/ECharts/MixChart.vue'
import PieChart from '@/components/ECharts/PieChart.vue'
import LineChart from '@/components/ECharts/LineChart.vue'
import { apiUser } from '@/api/dataStatistics'

export default {
  name: 'Panel1',
  props: {
    title: String,
    time: Object,
    chartType: String,
    legend: Array,
    tjtype: String,
  },
  components: { MixChart, PieChart, LineChart },
  watch: {
    time: function () {
      this.getData()
    },
  },
  data() {
    return {
      type: 'pie',
      tabActive: 1,
      tabList: [
        { id: 1, label: '日' },
        { id: 2, label: '周' },
        { id: 3, label: '月' },
      ],
      height: '400px',
      xAxis: [],
      data: {},
      chartDataBar: [],
      chartDataLine: {},
      chartDataPie: {},
    }
  },
  mounted() {
    if (this.chartType) {
      this.type = this.chartType
    }
  },
  destroyed() {},
  methods: {
    getData() {
      apiUser({ ...this.time, method: this.tabActive, tjtype: this.tjtype }).then((res) => {
        this.data = res.data
        this.setChartsData(this.data)
      })
    },
    handleChange() {
      this.getData()
    },
    handleTypeChange(type) {
      this.type = type
    },
    handleClick() {},
    setChartsData(data) {
      // bar
      if (data.key && data.key.length > 0) {
        this.xAxis = data.key
        this.chartDataBar = []
        this.legend.forEach((item) => {
          this.chartDataBar.push({
            name: item.name,
            data: data[item.value],
            type: item.type,
          })
        })
        // line
        this.chartDataLine = {
          xAxis: data.key,
          series: this.chartDataBar,
        }
        // pie
        const seriesData = data.key.map((item, index) => {
          return {
            name: item,
            value: data.total[index],
          }
        })
        this.chartDataPie = {
          series: [
            {
              name: '',
              data: seriesData,
            },
          ],
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
}

.panel-content {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.icon {
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  opacity: 0.5;
  &:hover {
    opacity: 1;
  }
  &.active {
    opacity: 1;
  }
}
.list {
  font-size: 12px;
  line-height: 2;
  color: #999;
  max-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-end;
  flex-wrap: wrap;
  .item {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    &.w100 {
      width: 100%;
    }
    &:hover {
      font-weight: bold;
      color: #666;
    }
  }
  .total {
    font-weight: bold;
    color: #666;
  }
}
</style>
